<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-11-13 13:48:09
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-30 09:27:41
-->
<template>
  <Card :bordered="false">
    <div class="order-progress" :class="`progress-${progress}`">
      <ul>
        <li>
          <span>下单时间</span>
          <div class="tip">{{ record.create_time }}</div>
        </li>
        <li>
          <span>付款</span>
          <div
            v-if="record.pay_status == PayStatusEnum['SUCCESS'].value"
            class="tip"
          >付款于 {{ record.pay_time }}</div>
        </li>
        <li>
          <span>发货</span>
          <div
            v-if="record.delivery_status == DeliveryStatusEnum['COMPLETE'].value"
            class="tip"
          >发货于 {{ record.delivery_time }}</div>
        </li>
        <li>
          <span>收货</span>
          <div
            v-if="record.receipt_status == ReceiptStatusEnum['RECEIVED'].value"
            class="tip"
          >收货于 {{ record.receipt_time }}</div>
        </li>
        <li>
          <span>完成</span>
          <div
            v-if="record.order_status == OrderStatusEnum['COMPLETED'].value"
            class="tip"
          >完成于 {{ record.receipt_time }}</div>
        </li>
      </ul>
    </div>
  </Card>
</template>

<script setup lang="ts">
import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
  PayStatusEnum,
  PayTypeEnum,
  ReceiptStatusEnum,
} from '/@/common/enum/order'
import { Card } from 'ant-design-vue';

import { ref, onMounted } from 'vue';
import { OrderRecordModel } from '../../model';
let progress = ref(2)
const {record}=defineProps<{
  record:OrderRecordModel,
}>()
// 步骤条位置
const initProgress = () => {
  progress.value = 2
  record.pay_status === PayStatusEnum['SUCCESS'].value && (progress.value += 1)
  record.delivery_status === DeliveryStatusEnum['COMPLETE'].value && (progress.value += 1)
  record.receipt_status === ReceiptStatusEnum['RECEIVED'].value && (progress.value += 1)
}
onMounted(()=>{
  record&&initProgress();
})

</script>

<style lang="less" scoped>
// @import "~ant-design-vue/es/style/themes/default.less";
@primary-color: rgb(24, 144, 255);
// 步骤条
.order-progress {
  height: 26px;
  line-height: 26px;
  background: #f8f8f8;
  border-radius: 13px;
  font-size: 14px;
  text-align: center;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 13px;
    background: @primary-color;
  }

  &:after {
    background: ~`colorPalette("@{primary-color}", 3) `;
    z-index: 1;
  }

  &.progress-1 {
    &:before {
      width: 0;
    }

    &:after {
      width: 20%;
    }
  }

  &.progress-2 {
    &:before {
      width: 20%;
    }

    &:after {
      width: 40%;
    }
  }

  &.progress-3 {
    &:before {
      width: 40%;
    }

    &:after {
      width: 60%;
    }
  }

  &.progress-4 {
    &:before {
      width: 60%;
    }

    &:after {
      width: 80%;
    }
  }

  &.progress-5 {
    &:before {
      width: 100%;
    }

    &:after {
      width: 100%;
    }

    li {
      &:nth-child(5) {
        color: #fff;
      }
    }
  }

  li {
    width: 20%;
    float: left;
    border-radius: 13px;
    position: relative;
    z-index: 3;
  }

  .tip {
    font-size: 12px;
    padding-top: 10px;
    color: #8c8c8c;
  }

  &.progress-1 li:nth-child(1),
  &.progress-2 li:nth-child(1),
  &.progress-3 li:nth-child(1),
  &.progress-4 li:nth-child(1),
  &.progress-5 li:nth-child(1) {
    color: #fff;
  }

  &.progress-2 li:nth-child(2),
  &.progress-3 li:nth-child(2),
  &.progress-4 li:nth-child(2),
  &.progress-5 li:nth-child(2) {
    color: #fff;
  }

  &.progress-3 li:nth-child(3),
  &.progress-4 li:nth-child(3),
  &.progress-5 li:nth-child(3) {
    color: #fff;
  }

  &.progress-4 li:nth-child(4),
  &.progress-5 li:nth-child(4) {
    color: #fff;
  }
}
</style>
